<!-- 维修报价 -->
<template>
  <div style="width: 96%;margin: 0 auto;">
    <el-steps :active="baseInfo.type - 2" finish-status="success" simple>
      <!--<el-step title="确认订单"></el-step>-->
      <el-step title="待报价"></el-step>
      <!--<el-step title="维修验收"></el-step>-->
      <el-step title="待结算"></el-step>
      <el-step title="待评价"></el-step>
    </el-steps>

    <div>
      <!-- 步骤一的时候显示 -->
      <div class="main_title">
        <div class="main_title_text">
          <div class="text_1">
            <span v-if="type==3">当前订单状态：订单需要报价，根据维修工反馈的配件需求，进行客户及维修工的双向报价</span>
            <span v-if="type==5">当前订单状态：订单结算中，根据维修工维修结果及客户确认结果进行结算</span>
            <span> | </span>
            当前处理时间:{{handle_time}}
          </div>
          <!--<div class="text_2">
            <div>
              您可以查看下方完整订单信息及维修工跟进情况，如无跟进记录，您可以：
              <el-button type="primary" round @click="urge">催办</el-button>
            </div>
          </div>-->
        </div>
      </div>
      <!--表单区域-->
      <div class="main_content">
        <!--订单详情-->
        <div class="details">
          <!-- 订单详情 -->
          <el-card style="background: #e9eef3" shadow="never">
            <template #header>
              <div class="card-header" style="text-align: left;">
                <el-row>
                  <el-col :span="6">
                    <span>订单详情：</span>
                    <span v-text="baseInfo.remarks" id="type"></span>
                  </el-col>
                  <el-col :span="6">
                    <span>订单编号：</span>
                    <span>{{ baseInfo.orderNo }}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>报修时间：</span>
                    <span>{{ parseTime(baseInfo.orderDate) }}</span>
                  </el-col>
                  <el-col :span="6">
                    <span>派单时间：</span>
                    <span>{{ parseTime(baseInfo.updateTime) }}</span>
                  </el-col>
                </el-row>
              </div>
            </template>
            <div style="text-align: left;padding: 0 20px;">
              <el-form :model="baseInfo">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="报修设备">
                      <span>{{ baseInfo.equipment }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="报修单位">
                      <span>{{ baseInfo.repairUnit }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="设备品牌">
                      <span>{{ baseInfo.brand }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="报修人">
                      <span>{{ baseInfo.customerName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="设备型号">
                      <span>{{ baseInfo.model }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话">
                      <span>{{ baseInfo.phone }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="出厂编号">
                      <span>{{ baseInfo.factoryNo }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="报修地址">
                      <span>{{ baseInfo.address }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="报修问题">
                      <span>{{ baseInfo.description }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目编号">
                      <span>{{ baseInfo.itemNo }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--<el-row>
                  <el-col :span="12">
                    <el-form-item label="转出人">
                      <span>{{ baseInfo.description }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="转单时间">
                      <span>{{ baseInfo.itemNo }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="转单留言">
                      <span>{{ baseInfo.description }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备类型">
                      <span>{{ baseInfo.itemNo }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="报修图片">
                      <el-image
                          v-for="(item,index) in srcList"
                          :key="index"
                          style="height: 300px;width: 80%"
                          :src="item"
                          :zoom-rate="1.2"
                          :max-scale="7"
                          :min-scale="0.2"
                          :preview-src-list="srcList"
                          lazy
                          :scroll-container="scrollContainer"
                          show-progress
                          :initial-index="4"
                          fit="cover"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="报修视频">
                      <video
                          ref="videoPlayer"
                          controls
                          height="300"
                          width="80%"
                          :src="baseInfo.videoUrl"
                      >
                        您的浏览器不支持 HTML5 视频标签。
                      </video>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </div>
        <!--项目详情-->
        <div class="project">
          <!-- 项目归属 -->
          <el-card style="background: #e9eef3" shadow="never">
            <template #header>
              <div class="card-header" style="text-align: left;">
                <el-row>
                  <el-col :span="12">
                    <span>项目归属：</span>
                    <span>{{ project.orderNo }}</span>
                  </el-col>
                  <el-col :span="12">
                    <span>项目编号：</span>
                    <span>{{ project.itemNo }}</span>
                  </el-col>
                </el-row>
              </div>
            </template>
            <div style="text-align: left;padding: 0 20px;">
              <el-form :model="project">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目甲方">
                      <span>{{ project.customerName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="单店名称">
                      <span>{{ project.shop }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="开始时间">
                      <span>{{ parseTime(project.maintenanceStartDate) }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="结束时间">
                      <span>{{ parseTime(project.maintenanceEndDate) }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="合同编号">
                      <span>{{ project.contractNo }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同名称">
                      <span>{{ project.contractName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目名称">
                      <span>{{ project.itemName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="维保周期">
                      <span>{{ project.maintenanceCycle }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目类型">
                      <span>{{ project.itemType }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属销售">
                      <span>{{ project.contractSale }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="是否过保">
                      <span>{{ baseInfo.isPay?'是':'否' }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </div>
        <!--沟通详情-->
        <div class="check_worker">
          <el-card style="background: #e9eef3" shadow="never">
            <template #header>
              <div class="card-header" style="text-align: left;">
                <el-row>
                  <el-col :span="24">
                    <span>沟通详情</span>
                  </el-col>
                </el-row>
              </div>
            </template>
            <div style="text-align: left;padding: 0 20px;">
              <el-form :model="orderCommunicate">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="维修工编号">
                      <span>{{ orderCommunicate.workNo }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="维修工姓名">
                      <span>{{ orderCommunicate.workName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="上门时间">
                      <span>{{ parseTime(orderCommunicate.dropInDate) }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="反馈时间">
                      <span>{{ parseTime(orderCommunicate.receiveDate) }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="预计配件">
                      <span>{{ orderCommunicate.expectEquip?"是":"否" }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="配件描述">
                      <span>{{ orderCommunicate.equipDes }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="联系方式">
                      <span>{{ orderCommunicate.workPhone }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="预计问题">
                      <span>{{ orderCommunicate.expectProblems }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="沟通情况">
                      <span>{{ orderCommunicate.communication }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </div>
        <!--采购信息-->
        <div class="equipment">
          <!-- 采购信息 -->
          <el-card style="background: #e9eef3" shadow="never">
            <template #header>
              <div class="card-header" style="text-align: left;">
                <el-row>
                  <el-col :span="8">
                    <span>原始采购信息</span>
                  </el-col>
                  <el-col :span="16">
                    <div style="display: flex">
                      <span>设备编号</span>
                      <span class="top_num_text" v-text="equipment.equipNo"></span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </template>
            <div style="text-align: left;padding: 0 20px;">
              <el-form :model="equipment">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="设备编号">
                      <span>{{ equipment.equipNo }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备名称">
                      <span>{{ equipment.equipMent }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="品牌">
                      <span>{{ equipment.brand }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="负责人">
                      <span>{{ equipment.leader }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="项目名称">
                      <span>{{ equipment.itemName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="数量">
                      <span>{{ equipment.number }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="地址">
                      <span>{{ equipment.area }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-card>
        </div>
        <!--维修成本-->
        <div class="repair_cost">
          <el-card style="background: #e9eef3" shadow="never">
            <template #header>
              <div class="card-header" style="text-align: left;">
                <el-row>
                  <el-col :span="6">
                    <div style="display: flex;">
                      <span>维修成本</span>
                      <!--<el-radio-group v-model="radio" @change="outr">
                        <el-radio label="1" :disabled="label_check"
                        >客户免费</el-radio>
                        <el-radio label="2" :disabled="label_check"
                        >客户付费</el-radio>
                      </el-radio-group>-->
                    </div>
                  </el-col>
                  <el-col :span="12" v-if="baseInfo.type===3">
                    <div style="display: flex">
                      <el-button type="text" @click="checkProject('选择配件')" plain
                      >选择配件</el-button>
                      <span class="top_num_text" v-text="sbbh"></span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </template>
            <div style="text-align: left;padding: 0;">
              <el-table
                  :data="accesses"
                  height="300"
                  border
              >
                <el-table-column label="配件编号" align="center" prop="partNo"/>
                <el-table-column label="配件名称" align="center" prop="partName" show-overflow-tooltip/>
                <el-table-column label="配件品牌" align="center" prop="partBrand" show-overflow-tooltip/>
                <el-table-column label="配件型号" align="center" prop="partModel" show-overflow-tooltip/>
                <el-table-column label="配件尺寸" align="center" prop="partSize" show-overflow-tooltip/>
                <!--<el-table-column label="配件数量" align="center" prop="partNum"/>-->
                <el-table-column prop="partNum" align="center" label="需求数量" width="160">
                  <template #default="scope">
                    <el-input-number
                        style="width: 100%"
                        v-model="scope.row.partNum"
                        @input="scope.row.totalPrice = (scope.row.partNum*1) * (scope.row.partPrice*1)"
                        :min="1"
                        @change="calculation"
                        :disabled="baseInfo.type!==3"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="partPrice" align="center" label="配件单价" width="100" />
                <el-table-column prop="totalPrice" align="center" label="配件总价" width="150">
                  <template #default="scope">
                    <el-input
                        v-model="scope.row.totalPrice"
                        style="width: 100%"
                        disabled
                    ></el-input>
                  </template>
                </el-table-column>
                <!--<el-table-column prop="longTime" label="备货时间" width="100">
                  <template #default="scope">
                    <el-input
                        v-model="scope.row.longTime"
                        style="width: 100%"
                        @change="btime"
                        :disabled="baseInfo.type===2"
                    ></el-input>
                  </template>
                </el-table-column>-->
                <el-table-column label="操作" width="100" fixed="right" v-if="baseInfo.type===3">
                  <template #default="scope">
                    <el-button
                        @click.native.prevent="deleteRow(scope.$index)"
                        type="text"
                        size="small"
                    >
                      移除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <div class="total">
            <div>
              <span>配件合计：</span>
              <el-input v-model="pjhj" style="width: 50%" disabled></el-input>
            </div>
            <div>
              <span>人工成本：</span>
              <el-input
                  type="number"
                  v-model="rgcb"
                  style="width: 50%"
                  @change="rgcbNum"
                  :disabled="baseInfo.type===5"
              ></el-input>
            </div>
            <div>
              <span>上门诊断费：</span>
              <el-input
                  v-model="deposit"
                  style="width: 50%"
                  disabled
              ></el-input>
            </div>
            <div id="total">
              <span>成本总计：</span>
              <el-input v-model="cbzj" style="width: 50%" disabled></el-input>
            </div>
          </div>
        </div>
        <!-- 评价 -->
        <div class="user_cost" v-if="baseInfo.type===5">
          <div class="user_cost_top">
            <div class="top_title">评价</div>
          </div>
          <el-row>
            <el-col :span="24">
              <span>客户评价：</span>
              <el-rate v-model="appraise.serviceScore" allow-half />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-input
                  v-model="appraise.serviceComment"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入客户评价"
                  style="width: 60%"
              ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <span>维修工评价：</span>
              <el-rate v-model="appraise.repairScore" allow-half />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-input
                  v-model="appraise.repairComment"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入维修师评价"
                  style="width: 60%"
              ></el-input>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!--选择配件-->
    <el-dialog :title="title" v-model="open" width="80%" append-to-body>
      <Project v-if="title==='选择项目'" ref="projects"></Project>
      <Access v-if="title==='选择配件'" ref="access"></Access>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { nextTick } from 'vue';
import Project from '../../project/index.vue'
import Access from '../../access/index.vue'
import Procurement from '../../procurement/index.vue'
import {getOrderDetail} from "@/api/system/orders.js";
import {equipmentList} from "@/api/system/procurement.js";

const srcList = ref([])
const srcList1 = ref([])
const tableData2 = ref([])
const baseInfo = ref({})
const project = ref({})
const equipment = ref({})
const handle_time = ref()
const works = ref({})
const orderCommunicate = ref({})
const accesses = ref([])
const orderParts = ref([])
// 项目归属是或者否
const radio = ref('1')
const value = ref('')
const textarea_close = ref('')
const open = ref(false)
const title = ref('')
//获取子组件方法
const access = ref(null)
const projects = ref(null)
const procurement = ref(null)
//订单状态
const type = ref(null)
const pjhj = ref(null)
const rgcb = ref(0)
const cbzj = ref(null)
const deposit = ref(0)

const appraise = ref({
  serviceScore:0,
  serviceComment:'',
  repairScore:0,
  repairComment:'',
})

const options = [
  {
    value: "1",
    label: "确认订单",
  },
  {
    value: "2",
    label: "关闭订单",
  },
]

const scrollContainer = ref(null);

onMounted(()=>{
  // 设置滚动容器（通常是父级滚动元素或 window）
  scrollContainer.value = document.querySelector('.details') || window;
})

//订单分派--电话解决--获取当前时间
const change_item = () => {
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth() + 1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf =
        new Date().getMinutes() < 10
            ? "0" + new Date().getMinutes()
            : new Date().getMinutes();
    handle_time.value = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf;
}

const checkProject = (v) => {
  open.value = true
  title.value = v
}
const submitForm = () =>{
  if(title.value==='选择配件'){
    accesses.value = access.value.currentRow
    accesses.value.forEach(item=>{
      item.orderNo = baseInfo.value.orderNo
      item.partNum = 1
      item.totalPrice = item.partNum * item.partPrice
    })
    calculation()
    open.value = false
  }else if(title.value==='选择项目'){
    project.value = projects.value.currentRow
    open.value = false
  }
}
const getDetail = (v,t) => {
  type.value = t
  getOrderDetail({orderNo: v}).then(res => {
    if (res.code === 200) {
      let {item, orderParts, orders, work, orderCommunicateHistory} = res.data
      baseInfo.value = orders
      project.value = item
      works.value = work
      orderCommunicate.value = orderCommunicateHistory
      orderParts.value = orderParts
      accesses.value = orderParts
      calculation()
      srcList.value = orders.pictureUrl.split(',')
      equipmentList({id:baseInfo.value.equipId}).then(response => {
        if(response.data){
          equipment.value = response.data
        }
      })
    }
  })
}
//移除选中的配件
const deleteRow = (index) => {
  //删除配件
  accesses.value.splice(index, 1);
  if (accesses.value.length === 0) {
    pjhj.value = 0;
  } else {
    let total_pj = [];
    accesses.value.forEach(item=>{
      total_pj.push(item.totalPrice);
    })
    pjhj.value = total_pj.reduce(
        (total, item) => (total * 1000 + item * 1000) / 1000
    );
  }
}
//人工成本计算
const rgcbNum = () => {
  cbzj.value = deposit.value + pjhj.value + rgcb.value*1
}
//配件合计求和
const calculation = () => {
  nextTick(()=>{
    let total = 0
    accesses.value.forEach(item=>{
      total += item.totalPrice
    })
    pjhj.value = total
    deposit.value = baseInfo.value.dropInFee
    rgcb.value = baseInfo.value.repairFee
    cbzj.value = deposit.value + pjhj.value + rgcb.value
  })
}

change_item()
defineExpose({getDetail,accesses,baseInfo,cbzj,rgcb,deposit,pjhj,appraise})
</script>

<style scoped>
:deep(.el-row) {
  padding: 10px 0;
}
:deep(.el-radio) {
  height: 20px !important;
}
:deep(.el-button) {
  /*padding: 0 !important;*/
  /*height: 24px !important;*/
}

.main_title {
  width: 100%;
  /*height: 18vh;*/
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(245, 214, 194);
  border: 1px solid black;
}

.main_title_text {
  width: 90%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.text_1 {
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}

.text_2{
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  text-align: left;
  font-size: 12px;
  display: flex;
  flex-direction: row;
}

.text_2 div{
  /*width: 50%;*/
  height: 100%;
}

.text_2 div:nth-child(2) .el-button{
  height: 3vh;
  font-size: 12px;
  margin-top: 1.5vh;
  line-height: 0.5vh;
}

.main_content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
  border: 1px solid black;
  background-color: #e9eef3;
  text-align: center;
}

.details {
  width: 100%;
  /*height: 90vh;*/
  border-bottom: 1px solid black;
}

#red span {
  color: rgb(255, 51, 0);
}

.repair_cost {
  width: 100%;
  /* height: 40vh; */
  border-bottom: 1px solid black;
}

.cost_tab {
  width: 95%;
  /* height: 30vh; */
  margin-left: auto;
  margin-right: auto;
}

.total {
  width: 100%;
  height: 5vh;
  margin: 10px 0;
  display: flex;
  flex-direction: row;
  /* border-bottom: 1px solid black; */
}

.total div {
  width: 100%;
  height: 100%;
}

.total div span {
  line-height: 5vh;
}
.discount_div {
  width: 100%;
  height: 5vh;
  display: flex;
  flex-direction: row-reverse;
}

.discount {
  width: 33.3%;
  height: 100%;
  line-height: 5vh;
  color: green;
}


#type {
  /* display: block; */
  background-color: rgb(255, 51, 0);
  color: white;
  padding: 1vh;
  margin-left: 1vw;
  border-radius: 50px;
}

.top_num div[data-v-62ad785c]:nth-child(1),
.top_equ div[data-v-62ad785c]:nth-child(1) {
  width: 90%;
}

.check_worker {
  width: 100%;
  /*height: 60vh;*/
  border-bottom: 1px solid black;
}

.project {
  width: 100%;
  /*height: 70vh;*/
  border-bottom: 1px solid black;
}

.top_title {
  width: 15%;
  height: 100%;
  line-height: 10vh;
  text-align: center;
  font-size: 14px;
}

.top_num_text {
  width: 50%;
  height: 100%;
  /*line-height: 10vh;*/
  text-align: left;
  margin-left: 20px;
  font-size: 14px;
}

.equipment {
  width: 100%;
  /*height: 80vh;*/
  border-bottom: 1px solid black;
}
</style>
